<template>
  <div class="container couponss">
    <div class="couponss-title">
      <span class="title" v-if="!type">优惠券</span>
      <span class="title" v-if="type=='store'">已发布的优惠券</span>
      <span class="num">{{couponsList?couponsList.length:'...'}}张</span>
    </div>
    <div class="coupons-list" v-if="couponsList">
      <ant-coupons v-for="(item,index) in couponsList" :data="item" :key="index" :selectCoupons="selectCoupons"></ant-coupons>
    </div>
    <i-load-more v-if="couponsList&&couponsList.length<=0" :tip="'暂无优惠券'" :loading="loading" />
    <i-load-more v-if="couponsList&&couponsList.length>0" :tip="'没有更多优惠券了'" :loading="loading" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  import AntCoupons from '@/components/coupons'
  import request from "@/api/request";
  export default {
    components: {
      AntCoupons
    },
    data() {
      return {
        type: null
      };
    },
    computed: {
      ...mapState(['couponsList'])
    },
    methods: {
      ...mapMutations(['setCouponsList', 'setUseCoupons']),
      getCouponsList(option) {
        request.getCouponsList(option).then(res => {
          this.setCouponsList(res.data);
        });
      },
      getStoreCoupons(option) {
        request.getStoreCoupons(option).then(res => {
          this.setCouponsList(res.data);
        });
      },
      selectCoupons(data) {
        if (this.$route.query.type) {
          this.setUseCoupons(data)
          this.$router.back()
        }
      },
    },
    mounted() {
      let query = {}
      this.type = this.$route.query.type
      if (this.type == 'selectCoupons') {
        query = {
          order_amount: this.$route.query.order_amount - 0
        }
      }
      if (this.type == 'store') {
        this.getStoreCoupons();
      } else {
        this.getCouponsList(query);
      }
    }
  };

</script>

<style lang="less">
  .coupons-list {
    padding: 15px;

    .coupons {
      margin-bottom: 15px;
    }
  }

  .couponss-title {
    display: flex;
    align-items: flex-end;
    padding: 15px 15px 0;

    .title {
      font-size: 18px;
      color: #606060;
      line-height: 1.1em;
    }

    .num {
      color: #606060;
      font-size: 12px;
      margin-left: 5px;
      line-height: 1em;
    }
  }

</style>
